<template>
  <view class="container">
    <view class="item" @click="$refs.buy.open()">
      <view>小学试题库</view>
      <view class="dwbox">
        <image src="../../static/icon/download.png" mode="" style="width: 24rpx; height: 24rpx; margin-right: 6rpx"></image>
        <text>下载</text>
      </view>
    </view>
    <view class="item">
      <view>中学知识点总结</view>
      <view class="dwbox">
        <image src="../../static/icon/download.png" mode="" style="width: 24rpx; height: 24rpx; margin-right: 6rpx"></image>
        <text>下载</text>
      </view>
    </view>
    <view class="item">
      <view>高中知识点总结</view>
      <view class="dwbox">
        <image src="../../static/icon/download.png" mode="" style="width: 24rpx; height: 24rpx; margin-right: 6rpx"></image>
        <text>下载</text>
      </view>
    </view>

    <view class="item">
      <view>中学试题库</view>
      <view class="dwbox">
        <image src="../../static/icon/download.png" mode="" style="width: 24rpx; height: 24rpx; margin-right: 6rpx"></image>
        <text>下载</text>
      </view>
    </view>
    <uni-popup ref="buy" type="center">
      <view class="box">
        <uni-icons type="close" size="20" style="display: flex; justify-content: flex-end" @click="$refs.buy.close()"></uni-icons>
        <view style="text-align: center; font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">提示</view>
        <view style="display: flex; justify-content: space-between; margin-top: 72rpx">
          <view style="font-size: 30rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222">直接购买</view>
          <view class="buybox">9.9元</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 30rpx;
    padding: 40rpx 0;
    border-bottom: 2rpx solid #f1f1f1;
    .dwbox {
      box-sizing: border-box;
      width: 122rpx;
      height: 48rpx;
      text-align: center;
      line-height: 48rpx;
      background: #3553e8;
      color: #fff;
      font-size: 26rpx;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
    }
  }
  .box {
    box-sizing: border-box;
    width: 510rpx;
    height: 306rpx;
    padding: 20rpx 35rpx;
    border-radius: 20rpx;
    background: linear-gradient(162deg, #dbe1ff 0%, #eaeeff 49%, #ffffff 100%);
    .buybox {
      width: 140rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      background: #3553e8;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
  }
}
</style>
